<template>
  <div>
    <div class="w-100 flex" style="height:97.9%">
      <div class="h-100 flex-column justify-between" style="width:25%">
        <div data-bottom class="h-33">
          <page-header :ph="243" text="农产品价格数据">
            <div v-if="optionNcpjgsj.isShow" class="h-100">
              <div class="select-style flex justify-between">
                <div
                  v-for="(item, index) of typeSelect"
                  :key="index"
                  :style="{ width: `${selectHeight}%` }"
                  :class="{ 'select-active': activeIndex === index }"
                  @click="activeIndex = index"
                >
                  {{ item }}
                </div>
              </div>
              <div style="height:86%">
                <div class="select-time cursor-pointer" @click="toPrice">
                  <span class="m-r-5">时间：{{ optionNcpjgsj.val[activeIndex].publishTime | timeZero }}&nbsp;</span>
                  <span class="m-r-5">价格：{{ optionNcpjgsj.val[activeIndex].price }}元/公斤&nbsp;</span>
                  <span class="m-r-5">交易量：{{ optionNcpjgsj.val[activeIndex].tradeNum }}公斤&nbsp;</span>
                  <span>价格指数：{{ optionNcpjgsj.val[activeIndex].priceIndex }}%</span>
                </div>
                <div style="height:80%;display:flex">
                  <div class="w-50">
                    <v-chart :options="optionNcpjgsj.option[activeIndex].sameRatio" />
                  </div>
                  <div class="w-50">
                    <v-chart :options="optionNcpjgsj.option[activeIndex].loopRatio" />
                  </div>
                </div>
              </div>
            </div>
          </page-header>
        </div>
        <div data-bottom class="h-33">
          <page-header :ph="183" text="农产品供应数据">
            <v-chart v-if="DHJGYXX.isShow" :options="DHJGYXX" />
          </page-header>
        </div>
        <div data-bottom class="h-33">
          <page-header :ph="183" text="农产品需求数据">
            <v-chart v-if="DHJXQXX.isShow" :options="DHJXQXX" />
          </page-header>
        </div>
      </div>
      <div style="width:1%" />
      <div class="h-100 position-relative" data-bottom style="width:74%;height:100%;padding: 2px;">
        <div id="container" style="height: 100%" />
        <div class="map-legend">
          <div v-for="item in colorList" :key="item.color" class="flex map-legend-item">
            <div class="map-legend-color" :style="{ background: item.color }" />
            <div class="">{{ item.type }}</div>
          </div>
        </div>
      </div>
    </div>
    <div style="height:2.1%" />
    <Particulars />
  </div>
</template>

<script>
import { agriculturalMarket, queryVariety, getTowSideStat } from '@/api/connector'
import Particulars from 'header/particulars.vue'
import { date } from 'jszip/lib/defaults'
import YlTable from 'header/yltable'
import PageHeader from 'header/PageHeader.vue'
import AMap from '@/utils/AMap'
import { formatNumber } from '@/utils/app'
export default {
  name: 'IndustrialBase',
  components: { PageHeader, Particulars, YlTable },
  filters: {
    timeZero(val) {
      return val.slice(0, 11)
    }
  },
  data() {
    return {
      map: null,
      infoWindow: null,
      colorList: [
        {
          type: '产量',
          color: '#2DAFFF'
        },
        {
          type: '需求量',
          color: '#6141FF'
        }
      ],
      optionNcpjgsj: {
        isShow: false
      },
      typeSelect: [],
      DHJXQXX: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
          formatter: function(params, ticket, callback) {
            var htmlStr = ''
            for (var i = 0; i < params.length; i++) {
              var param = params[i]
              var xName = param.name // x轴的名称
              var seriesName = param.seriesName // 图例名称
              var value = param.value // y轴值
              var color = param.color // 图例颜色
              if (i === 0) {
                htmlStr += xName + '<br/>' // x轴的名称
              }
              htmlStr += '<div>'
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' //一个点
              htmlStr += seriesName + '：' + formatNumber(value) + (i === 0 ? '公斤' : '元/斤') // 圆点后面显示的文本
              htmlStr += '</div>'
            }
            return htmlStr
          }
        },
        legend: {
          textStyle: {
            color: '#fff'
          },
          data: ['最新成交价', '预购队列']
        },
        xAxis: [
          {
            type: 'category',
            data: ['2019', '2018'],
            axisLabel: {
              interval: 0
            },
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
          },
          {
            type: 'category',
            data: ['2019', '2018'],
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
          }
        ],
        yAxis: [
          {
            name: '需求量(公斤)',
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
          },
          {
            name: '平均价格(元/斤)',
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
          }
        ],
        grid: {
          left: '7%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            name: '需求量',
            type: 'bar',
            barMaxWidth: 30,
            data: [6, 7, 8, 16]
          },
          {
            name: '平均价格',
            type: 'line',
            yAxisIndex: 1,
            data: [6, 7, 8, 15, 25]
          }
        ]
      },
      DHJGYXX: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
          formatter: function(params, ticket, callback) {
            var htmlStr = ''
            console.log(params)
            for (var i = 0; i < params.length; i++) {
              var param = params[i]
              var xName = param.name // x轴的名称
              var seriesName = param.seriesName // 图例名称
              var value = param.value // y轴值
              var color = param.color // 图例颜色
              if (i === 0) {
                htmlStr += xName + '<br/>' // x轴的名称
              }
              htmlStr += '<div>'
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' //一个点
              htmlStr += seriesName + '：' + formatNumber(value) + (i === 0 ? '公斤' : '元/斤') // 圆点后面显示的文本
              htmlStr += '</div>'
            }
            return htmlStr
          }
        },
        legend: {
          textStyle: {
            color: '#fff'
          },
          data: ['最新成交价', '预购队列']
        },
        xAxis: [
          {
            type: 'category',
            data: ['2019', '2018'],
            axisLabel: {
              interval: 0
            },
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
          },
          {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
          }
        ],
        yAxis: [
          {
            name: '供应量(公斤)',
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
          },
          {
            name: '平均价格(元/斤)',
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
          }
        ],
        grid: {
          left: '7%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            name: '供应量',
            type: 'bar',
            barMaxWidth: 30,
            data: [6, 7, 8, 16]
          },
          {
            name: '平均价格',
            type: 'line',
            yAxisIndex: 1,
            data: [6, 7, 8, 15, 25]
          }
        ]
      },
      activeIndex: 0,
      table: {
        url: '/cybd/api/agri/agriProductSupply/queryList',
        columns: [
          {
            prop: 'name',
            label: '名称'
          },
          {
            prop: 'supplyNum',
            label: '供应量'
          },
          {
            prop: 'avgPrice',
            label: '平均单价'
          },
          {
            prop: 'area',
            label: '所在地区'
          }
        ]
      },
      table_2: {
        url: '/cybd/api/agri/agriProductDemand/queryList',
        columns: [
          {
            prop: 'name',
            label: '名称'
          },
          {
            prop: 'demandNum',
            label: '需求量'
          },
          {
            prop: 'avgPrice',
            label: '平均单价'
          },
          {
            prop: 'area',
            label: '所在地区'
          }
        ]
      }
    }
  },
  computed: {
    selectHeight() {
      return parseInt(100 / this.typeSelect.length)
    }
  },
  created() {
    this.getMap()
    this.init()
  },
  methods: {
    toPrice() {
      this.$router.push({
        name: 'Fourstage',
        query: {
          code: '000203',
          name: 'industrial-evelopment',
          typeCode: '农产品价格-苹果'
        }
      })
    },
    toGongying() {
      this.$router.push({
        name: 'Fourstage',
        query: {
          code: '000203',
          name: 'industrial-evelopment',
          typeCode: '农产品供应量-苹果'
        }
      })
    },
    toXuqiu() {
      this.$router.push({
        name: 'Fourstage',
        query: {
          code: '000203',
          name: 'industrial-evelopment',
          typeCode: '农产品需求量-苹果'
        }
      })
    },
    async getMap() {
      this.amap = await AMap()
      const p1 = new Promise((resolve, reject) => {
        resolve(this.amap)
      })
      const p2 = new Promise((resolve, reject) => {
        const loca = document.createElement('script')
        loca.setAttribute('src', 'http://webapi.amap.com/loca?v=1.3.2&key=52a208e99a6c24ab60208167d15cb5db')
        document.head.appendChild(loca)
        loca.onload = function() {
          resolve(loca)
        }
      })

      const p3 = new Promise((resolve, reject) => {
        agriculturalMarket().then((res) => {
          resolve(res.body.data)
        })
      })
      Promise.all([p1, p2, p3])
        .then((result) => {
          var map = new this.amap.Map('container', {
            mapStyle: 'amap://styles/fa9f091b73ec8e37b8b84784a4791559', // 地图样式
            zoom: 8,
            center: [116.397475, 39.908668],
            viewMode: '3D'
          })
          var layer = new Loca.RoundPointLayer({
            map: map,
            fitView: true
          })
          const b = []
          result[2].map((item, index) => {
            if (item.type === 0) {
              const o = JSON.parse(item.coordinate)
              o.mag = item.number / 5000
              o.depth = 100
              o.title = '123'
              o.time = +new Date()
              o.lnglat = [o.lng, o.lat].join(',')
              b.push(o)
            }
          })
          layer.setData(b, {
            lnglat: 'lnglat'
          })
          layer.setOptions({
            style: {
              radius: {
                key: 'mag', // 映射字段
                scale: 'linear', // 比例尺
                value: [10, 50], // 输出范围
                input: [4, 8] // 输入范围
              },
              color: this.colorList[0].color,
              opacity: 0.8,
              borderWidth: 1,
              borderColor: this.colorList[0].color
            }
          })

          layer.render()

          var layer1 = new Loca.RoundPointLayer({
            map: map,
            fitView: true
          })
          const f = []
          result[2].map((item, index) => {
            if (item.type === 1) {
              const o = JSON.parse(item.coordinate)
              o.mag = item.number / 5000
              console.log(o.mag)
              o.depth = 100
              o.title = '123'
              o.time = +new Date()
              o.lnglat = [o.lng, o.lat].join(',')
              f.push(o)
            }
          })
          layer1.setData(f, {
            lnglat: 'lnglat'
          })
          layer1.setOptions({
            style: {
              radius: {
                key: 'mag', // 映射字段
                scale: 'linear', // 比例尺
                value: [10, 50], // 输出范围
                input: [4, 8] // 输入范围
              },
              color: this.colorList[1].color,
              opacity: 0.8,
              borderWidth: 1,
              borderColor: this.colorList[1].color
            }
          })

          layer1.render()
        })
        .catch((error) => {
          console.log(error)
        })
    },
    init() {
      // 大红椒供应信息
      getTowSideStat({ groupCode: 'DHJGYXX' }).then((res) => {
        const val = res.body
        const DHJGYXX = this.DHJGYXX
        DHJGYXX.xAxis[0].data = val.dateSet
        // DHJGYXX.xAxis[1].data = val.dateSet
        DHJGYXX.legend.data = val.typeSet
        DHJGYXX.series[0].data = val.typeValueListMap[DHJGYXX.series[0].name]
        DHJGYXX.series[1].data = val.typeValueListMap[DHJGYXX.series[1].name]
        this.DHJGYXX.isShow = true
      })

      // 大红椒需求信息
      getTowSideStat({ groupCode: 'DHJXQXX' }).then((res) => {
        const val = res.body
        const DHJXQXX = this.DHJXQXX
        DHJXQXX.xAxis[0].data = val.dateSet
        DHJXQXX.xAxis[1].data = ''
        DHJXQXX.legend.data = val.typeSet
        DHJXQXX.series[0].data = val.typeValueListMap[DHJXQXX.series[0].name]
        DHJXQXX.series[1].data = val.typeValueListMap[DHJXQXX.series[1].name]
        this.DHJXQXX.isShow = true
      })

      queryVariety().then((data) => {
        const val = data.body.data
        this.typeSelect = val.map((item) => item.variety)
        const option = []
        val.forEach((item) => {
          option.push({
            sameRatio: {
              tooltip: {
                formatter: '{a} : {c}%',
                position: [10, 10]
              },
              series: [
                {
                  name: '同比',
                  type: 'gauge',
                  radius: '80%',
                  axisLabel: {
                    fontSize: 'italic'
                  },
                  pointer: {
                    length: '88%',
                    width: 4
                  },
                  axisLine: {
                    lineStyle: {
                      width: 10 // 这个是修改宽度的属性
                    }
                  },
                  axisTick: {
                    length: 6
                  },
                  splitLine: {
                    length: 10
                  },
                  detail: { formatter: '{value}%\n\n同比', fontSize: 12, offsetCenter: ['-8%', '88%'], color: '#fff' },
                  data: [{ value: item.sameRatio }]
                }
              ]
            },
            loopRatio: {
              tooltip: {
                formatter: '{a} : {c}%',
                position: [10, 10]
              },
              series: [
                {
                  name: '环比',
                  type: 'gauge',
                  axisLabel: {
                    fontSize: 'italic'
                  },
                  center: ['50%', '50%'],
                  radius: '80%',
                  axisLabel: {
                    fontSize: 'italic'
                  },
                  pointer: {
                    length: '88%',
                    width: 4
                  },
                  axisLine: {
                    lineStyle: {
                      width: 10 // 这个是修改宽度的属性
                    }
                  },
                  axisTick: {
                    length: 6
                  },
                  splitLine: {
                    length: 10
                  },
                  detail: { formatter: '{value}%\n\n环比', fontSize: 12, offsetCenter: ['-8%', '88%'], color: '#fff' },
                  data: [{ value: item.loopRatio }]
                }
              ]
            }
          })
        })
        this.optionNcpjgsj = { isShow: true, option, val }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.h-33 {
  height: 32%;
}

div[data-bottom] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
  background-size: 100% 100% !important;
}
.h-24 {
  height: 23.2%;
}
.select-style {
  height: 14%;
  background: rgba(36, 193, 247, 0.12);
  border: 2px solid rgba(26, 116, 207, 1);
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  div {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}
.select-active {
  background: rgba(26, 116, 207, 1);
  border: 1px solid rgba(26, 116, 207, 1);
}
.select-time {
  font-family: YouSheBiaoTiHei;
  color: rgba(255, 255, 255, 1);
  line-height: 24px;
  text-shadow: 0px 2px 13px rgba(50, 197, 255, 0.32);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(39, 190, 251, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 12px;
  display: flex;
  align-items: center;
  height: 20%;
}
.w-50 {
  width: 50%;
}
.el-table {
  background-color: transparent !important;
}
.map-legend {
  padding: 12px 18px;
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 1000;
  color: #fff;
  background: rgba(18, 33, 53, 0.8);
  border: solid 1px #5c6d7c;
  border-radius: 4px;
}
.map-legend-color {
  width: 40px;
  height: 18px;
  margin-right: 10px;
}
.map-legend-item {
  margin-bottom: 8px;
}
.map-legend-item:last-child {
  margin-bottom: 0;
}
</style>
